import React,{Component,Fragment } from 'react'
import axios from 'axios'
import './index.css'
import XiaoItem from './xiaoItem'
import Boss from '../boss'
import {CSSTransition , TransitionGroup} from 'react-transition-group'
import '../boss/index.css'

class Xiaojiejie extends Component{
  componentDidMount(){
    console.log('11this.props', this.props)
    // 这个输出在请求失败的时候没有成功输出，执行顺序一会看一下
    // console.log('componentDidMount')
    // axios.post('https://web-api.juejin.im/v3/web/wbbr/bgeda')
    axios.get('https://rapserver.sunmi.com/app/mock/241/GET/4234235432')
        .then((res)=>{
          // console.log('axios 获取数据成功:'+JSON.stringify(res))
          // 这是字符串 回去转一下  axios 获取数据成功:"[精油666,推背777,大胖55]"  原来是mock数据写错了 []的每项用''包起来
          // console.log('axios 获取数据成功:'+JSON.stringify(res.data.server))
          // 转数组  [精油666,推背777,大胖55]     
          // let list = eval("(" + JSON.stringify(res.data.server) + ")" )
          // console.log('18list', list)
          // list = ['精油666', '推背777', '大胖55']
          // console.log('20list', list)
          this.setState({
            list: res.data.server
          })
        })
        .catch((error)=>{console.log('axios 获取数据失败'+error)})
}
    render(){
        return  (
            <Fragment>
               <div>
                 {this.props.match.params.url}
                 <input
                //  value={this.props.match.params.url}  这里实现了url传值取值
                 placeholder={this.props.location.pathname}
                 ></input>
               </div>
               <div>
                 <label htmlFor="jspang">加入服务:</label>
                 <input
                 id="jspang"
                 className="input"
                 value={this.state.inputValue}
                 onChange={this.inputChange.bind(this)}
                 ref={(input)=>{this.input=input}}
                 />
                 <button onClick={this.addList.bind(this)}> 增加服务 </button>
               </div>
               <ul ref={(ul)=>{this.ul=ul}}>
                 <TransitionGroup>
                   {
                     this.state.list.map((item,index) => {
                       return (
                                <CSSTransition
                                timeout={1000}
                                classNames='boss-text'
                                unmountOnExit
                                appear={true}
                                key={index+item}
                                >
                                  <XiaoItem
                                  key={index+item}
                                  content={item}
                                  index={index}
                                  avname='熊大先生'
                                  avname22='抓娃娃'
                                  deleteItem={this.deleteItem.bind(this)}
                                  >
                                  </XiaoItem>
                                </CSSTransition>
                              )
                     })
                   }
                  </TransitionGroup>
               </ul> 
               <Boss></Boss>
               </Fragment>
        )
    }

    //删除单项服务
    deleteItem(index){
      // console.log(index)
      let list = this.state.list
      list.splice(index,1)
      this.setState({
          list:list
      })
      // 注意下面的方法，虽然可以实现需求 但是别这么做，react禁止直接操作state
      // this.state.list.splice(index,1)
      // this.setState({
      //     list:this.state.list
      // })
    }

    //增加服务的按钮响应方法
    addList(){
      this.setState({
          list:[...this.state.list,this.state.inputValue],
          inputValue: ''
      },() => {
        console.log('77服务长度：', this.ul.querySelectorAll('div').length)
      })

    }

    inputChange(e){
        // console.log(e)
        this.setState({
          // inputValue:e.target.value
          // 这就使我们的代码变得语义化和优雅的多。但是就我个人的经验来讲，我是不建议用ref这样操作的，因为React的是数据驱动的，所以用ref会出现各种问题。
          inputValue:this.input.value
        })
    }

    //js的构造函数，由于其他任何函数执行
    constructor(props){
      super(props) //调用父类的构造函数，固定写法
      this.state={
          inputValue:'' , // input中的值
          list:['基础按摩', '精油推背']    //服务列表
      }
    }
}
export default Xiaojiejie 